<script setup lang="ts" name="LangSwitcher">
import { useLangStore } from "../config/stores/lang";
const langStore = useLangStore();
const switchLanguage = (event: any) => {
  const langOption = event.value;
  langStore.setLang(langOption.lang);
};
const selectedLang = ref(langStore.selectedLocale);
</script>

<template>
  <div class="card flex justify-center">
    <Select
      v-model="selectedLang"
      :options="langStore.langOptions"
      optionLabel="name"
      placeholder=""
      checkmark
      :highlightOnSelect="false"
      class="w-full md:w-56"
      @change="switchLanguage"
    />
  </div>
</template>

<style scoped></style>
